<template>
<div class="main-body-1200">
    <!--  <div class="location" style="margin-bottom:35px;">
        <span>所在位置：首页>>物流枢纽</span>
     </div> -->
    <div class="main-body">
        <side-menu active="3"></side-menu>
        <div class="a-main">
            <div class="a-main-title">
                <h2>货运场站</h2>
            </div>
            <div class="tran-line"></div>
            <div class="a-main-content">
                <a-row type='flex' style="margin-top:10px;">
                    <span class="left_line"></span>
                    <h3>最新货运场站运输路线</h3>
                </a-row>
                <!-- 发送地址表单 -->
                <a-form :form="form" style="margin-top:15px;">
                      <a-row :gutter='24' type='flex' justify="space-around" align="middle">
                          <a-col :span='8'>
                              <a-form-item label="起运地："  :label-col="{ span: 8}" :wrapper-col="{ span:16 }">
                                 <a-input  placeholder="起运地"/>
                              </a-form-item>
                           </a-col>
                           <a-col :span='8'>
                              <a-form-item label="目的地：" :label-col="{ span: 8}" :wrapper-col="{ span:16}" >
                                <a-input placeholder="目的地"/>
                             </a-form-item>
                           </a-col>
                           <a-col :span='8'>
                                <a-form-item label="运输类型：" :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                <a-select placeholder="全部">
                                    <a-select-option value="全部">
                                    全部
                                    </a-select-option>
                                    <a-select-option value="全部">
                                    全部
                                    </a-select-option>
                                </a-select>
                                </a-form-item>
                          </a-col>
                      </a-row>
                      <a-row :gutter='24' type='flex' justify="space-around" align="top">
                           <a-col :span='8'>
                              <a-form-item label="运输时效：" :label-col="{ span: 8}" :wrapper-col="{ span:16 }">
                                <a-input  placeholder="运输时效"/>
                              </a-form-item>
                          </a-col>
                           <a-col :span='8'>
                              <a-form-item label="服务提供商：" :label-col="{ span: 8}" :wrapper-col="{ span:16 }">
                                <a-input placeholder="服务提供商" />
                             </a-form-item>
                          </a-col>
                          <a-col :span='8' class='search-btn'>
                                 <a-button type="primary" :span='4' style='margin-right:10px;'>搜索</a-button>
                                 <a-button :span='4'>重置</a-button>
                          </a-col>
                      </a-row>
                </a-form>
                <!-- 具体表格 -->
                 <a-table  :columns="columns" :dataSource="data"  style='margin-top:25px;margin-bottom:25px;' :pagination='false'>
                   <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
                </a-table>
               <div class="tran-line"></div>
                <a-row type='flex'>
                    <span class="left_line"></span>
                    <h3>最新货运场站运输货物</h3>
                </a-row>
                <!-- 发送地址表单 -->
                <a-form :form="form" style="margin-top:15px;">
                      <a-row :gutter='24' type='flex' justify="space-around" align="middle">
                          <a-col :span='8'>
                              <a-form-item label="起运地："  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                              <a-input  placeholder="起运地"/>
                              </a-form-item>
                           </a-col>
                           <a-col :span='8'>
                              <a-form-item label="目的地：" :label-col="{ span: 8}" :wrapper-col="{ span:16 }" >
                                <a-input placeholder="目的地"/>
                             </a-form-item>
                           </a-col>
                           <a-col :span='8'>
                                <a-form-item label="有效期" :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                 <a-input placeholder="有效期"/>
                                </a-form-item>
                          </a-col>
                      </a-row>
                      <a-row :gutter='24' type='flex' justify="space-around" align="top">
                           <a-col :span='8'>
                              <a-form-item label="货物类型：" :label-col="{ span: 8}" :wrapper-col="{ span:16}" >
                                <a-input placeholder="货物类型"/>
                              </a-form-item>
                          </a-col>
                           <a-col :span='8'>
                              <a-form-item label="货物名称：" :label-col="{ span: 8}" :wrapper-col="{ span:16 }" >
                                <a-input placeholder="货物名称"/>
                             </a-form-item>
                          </a-col>
                          <a-col :span='8' class='search-btn'>
                                 <a-button type="primary" :span='4' style='margin-right:10px;'>搜索</a-button>
                                 <a-button :span='4'>重置</a-button>
                          </a-col>
                      </a-row>
                </a-form>
                <!-- 具体表格 -->
                 <a-table  :columns="columns" :dataSource="data" style='margin-top:25px;margin-bottom:25px;' :pagination='false'>
                   <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
                </a-table>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import SideMenu from './components/SideMenu.vue'

 const columns = [{
  title: '起运地',
  dataIndex: 'name',
  scopedSlots: { customRender: 'name' },
}, {
  title: '目的地',
  dataIndex: 'address',
}, {
  title: '货源类型',
  dataIndex: 'types',
}, {
  title: '货物名称',
  dataIndex: 'goodsName',
}, {
  title: '重量/体积',
  dataIndex: 'size',
}, {
  title: '发布时间',
  dataIndex: 'time',
},{
  title: '详情',
  dataIndex: 'detail',
},{
  title: '报价',
  dataIndex: 'price',
}
];
const data = [{
  key: '1',
  name: '云南昆明',
  address: '泰国曼谷',
  types:"天地汇",
  goodsName:"国际货代",
  size:"京NN1234",
  time:"2",
  detail:"查看",
  price:"我要报价"
},{
  key: '2',
  name: '云南',
  address: '企业',
  types:"半挂",
  goodsName:"商检报关",
  size:"清CHJ123",
  time:"4",
  detail:"查看",
  price:"我要报价"
}];
export default {
    components: {
        SideMenu
    },
     data() {
        return {
           data,
          columns,
         formLayout: 'horizontal',
         form: this.$form.createForm(this),
        }
    },
   

}
</script>
<style lang="scss" scoped>
hr{
    width:100%;
    border-color: #eee;
    margin:25px 0;
}
.left_line{
      width:6px;
      height:22px;
      background: green;
      margin-right: 5px;
      vertical-align: middle;
      display: inline-block;
}
.ant-select-selection--single{
    width:150px;
}
</style>